var currentTimeline;
var currentScreen=-1;
var initialTime=-1;

function setScreen(screen){
	if(currentScreen>=0) {
		var curDiv=document.getElementById("ds_"+currentTimeline.args[currentScreen].screenid);

		// current div goes to the back
		curDiv.style.zIndex=100;
	}
	
	var nextDiv=document.getElementById("ds_"+currentTimeline.args[screen].screenid);
	if(nextDiv){
		// next div goes to the front
		nextDiv.style.zIndex=200;
		
		// if a transition exists
		if(currentTimeline.args[screen].transition) {
			// call transition
		} else {
			// simple switch of screens
			nextDiv.style.visibility='visible';
		}
		
		// store current screen
		currentScreen=screen;
	}
	
}

function getWidth() {
	return window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
}

function getHeight() {
	return window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
}

function initDS() {
	var evtSource = new EventSource("broadcast.php?w="+getWidth()+"&h="+getHeight());
	var debugmode=true;
	
	evtSource.onopen = function(e) {
	  	_debug("Connection was opened");
	};
	
	evtSource.onmessage = function(e) {
		_debug("Received message: "+e.data);
	}
	
	// add event listener
	evtSource.addEventListener("ping", function(e) {
		var obj = JSON.parse(e.data);
		_debug(obj.time);
	}, false);
	
	// add event listener
	evtSource.addEventListener("timeline", function(e) {
		currentTimeline = JSON.parse(e.data);
		_debug("Received timeline ID:"+currentTimeline.timeline+" duration: "+currentTimeline.duration+" with "+currentTimeline.args.length+" screens");
		
		// create all screens
		for(var i=0; i<currentTimeline.args.length; i++) {
			createDiv(currentTimeline.args[i].screenid, currentTimeline.args[i].template);
		}
		
		// mark timeline start
		initialTime=Date.now();
		
		// change screen
		setScreen(0);
		
		// tests
		//transitionFadeSimple('ds_1','ds_2', 2000);
		
		//transitionFadeRight('ds_1','ds_2', 2000);
		//transitionFadeLeft('ds_1','ds_2', 2000);

		//transitionFadeTop('ds_1','ds_2', 2000);
		//transitionFadeBottom('ds_1','ds_2', 2000);
		
		transitionFadeRightTop('ds_1','ds_2', 2000);

	}, false);
	
	evtSource.onerror = function(e) {
		if (e.readyState == EventSource.CLOSED) {
			console.debug("Connection was closed");
		} else {
			console.debug("EventSource failed:"+e);
			// restart
			var evtSource = null;
			var evtSource = new EventSource("broadcast.php?w="+x+"&h="+y);
		}
	};
	
	
}

//create or update div content
function createDiv(screenId, template) {
	var div=document.getElementById("ds_"+screenId);
	
	if(div==undefined) {
		_debug("Creating div #ds_"+screenId);
		div = document.createElement("div");
		
		console.debug("content: "+template);
		div.id="ds_"+screenId;
		div.style.visibility="hidden";
		document.body.appendChild(div);
	}
	div.innerHTML = template;
}

function _debug(x){
	console.debug(x);
}

function transitionFadeSimple(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  		});
		});
}

function transitionFadeRight(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);
	
	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'left': getWidth(),
	  		});	
		});
}

function transitionFadeLeft(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'left': -getWidth(),
	  		});
		});
}

function transitionFadeTop(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'top': -getHeight(),
	  		});
		});
}

function transitionFadeBottom(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'top': getHeight(),
	  			'height': 0,
	  		});
		});
}

function transitionFadeRightTop(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);
	
	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'top': -getHeight(),
	  			'left': getWidth(),
	  		});
		});
}

function transitionFadeRightBottom(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);
	
	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'top': getHeight(),
	  			'left': getWidth(),
	  			'height': 0,
	  		});
		});
}

function transitionFadeLeftTop(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);
	
	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'top': -getHeight(),
	  			'left': -getWidth(),
	  		});
		});
}

function transitionFadeLeftBottom(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);
	
	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'opacity': 0,
	  			'top': getHeight(),
	  			'left': -getWidth(),
	  			'height': 0,
	  		});
		});
}

function transitionMoveRight(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);
	
	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'left': getWidth(),
	  		});
		});
}

function transitionMoveLeft(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'left': -getWidth(),
	  		});
		});
}

function transitionMoveTop(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn,
		//fps: 24,
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start.delay(10, this, {
	  			'top': -getHeight(),
	  		});
		});
}

function transitionMoveBottom(div1, div2, duration){
	var curDiv=document.getElementById(div1);

	resetStyles(div1, div2);

	fx = new Fx.Morph(div1, {
		duration: duration,
		transition: Fx.Transitions.linear.easeIn,
	});

	// this will cause div1 opacity to go from 1 to 0
	fx.start({
		}).chain(function(){
	  		this.start({
	  			'top': getHeight(),
	  			'height': 0,
	  		});
		}).chain(function(){
			alert('complete');
		});
}

function resetStyles(div1, div2) {
	var cdiv1=document.getElementById(div1);
	var cdiv2=document.getElementById(div2);

	// current div goes to the front
	cdiv1.style.top=0
	cdiv1.style.left=0
	cdiv1.style.zIndex=200;
	cdiv1.style.visibility='visible';
	cdiv1.style.opacity=1;
	cdiv1.style.height=getHeight();
	cdiv1.style.width=getWidth();
	
	// new div goes to back
	cdiv2.style.top=0
	cdiv2.style.left=0
	cdiv2.style.zIndex=100;
	// show second div
	cdiv2.style.visibility='visible';
	cdiv2.style.opacity=1;
	cdiv2.style.height=getHeight();
	cdiv2.style.width=getWidth();
}